<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>

        <ui:composition template="./template.xhtml">

            <ui:define name="title">
                Account Info
            </ui:define>

            <ui:define name="content">
                <script type="text/javascript" >
                    $(document).ready(function(){
                        $('#changeinfo').hide();
                        $('#changepass').hide();
                    });
                    $(document).ready(function(){
                        $('#linkinfo').click(function(){
                            $('#detail').hide();
                            $('#changepass').hide();
                            $('#changeinfo').show();
                        });                   
                    });
                    $(document).ready(function(){
                        $('#linkpass').click(function(){
                            $('#detail').hide();
                            $('#changepass').show();
                            $('#changeinfo').hide();
                        });
                    });
                    $(document).ready(function(){
                        if($('#name').val()==""||$('#address').val()==""||$('#email').val()==""||$('#bod_input').val()==""||$('#phone').val()==""){
                            $('#detail').hide();
                            $('#changepass').hide();
                            $('#changeinfo').show();
                        }
                    });
                    $(document).ready(function(){
                        if($('.ui-message-error-detail').text()!=""){
                            $('#detail').hide();
                            $('#changepass').show();
                            $('#changeinfo').hide();
                        } 
                    });
                </script>
                <h:form prependId="false">
                    <div><p:messages id="messages" showDetail="true" autoUpdate="true"  globalOnly="true"/></div>
                    <div id="detail">
                        <table align="center" width="500px">
                            <tr>
                                <td colspan="2" align="center"><h3>Account Information</h3></td>
                            </tr>
                            <tr>
                                <td></td><td align="right"><a id="linkinfo" href="#">Change Information</a>|<a id="linkpass" href="#">Change Password</a></td>
                            </tr>
                            <tr>
                                <td>Username</td>
                                <td>#{editAccountBean.user.username}</td>
                            </tr>
                            <tr>
                                <td>Full Name</td>
                                <td>#{editAccountBean.user.fullname}</td>
                            </tr>
                            <tr>
                                <td>Gender</td>
                                <td>#{editAccountBean.user.gender}</td>
                            </tr>
                            <tr>
                                <td>Address</td>
                                <td>#{editAccountBean.user.address}</td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td>#{editAccountBean.user.email}</td>
                            </tr>
                            <tr>
                                <td>Role</td>
                                <td>#{editAccountBean.user.roleID.roleName}</td>
                            </tr>
                            <tr>
                                <td>Create Date</td>
                                <td><h:outputText value="#{editAccountBean.user.createDate}">
                                        <f:convertDateTime pattern="dd/MM/yyyy" />
                                    </h:outputText></td>
                            </tr>
                            <tr>
                                <td>Birth Of Date</td>
                                <td><h:outputText value="#{editAccountBean.user.bod}">
                                        <f:convertDateTime pattern="dd/MM/yyyy" />
                                    </h:outputText></td>
                            </tr>
                            <tr>
                                <td>Status</td>
                                <td><h:outputText value="#{editAccountBean.user.status}">
                                        <f:converter converterId="UserStatus" />
                                    </h:outputText></td>
                            </tr>
                        </table>
                    </div>
                </h:form>
                <h:form prependId="false">
                    <div id="changeinfo">
                        <table align="center" width="600px">
                            <tr>
                                <td colspan="2" align="center"><h3>Change Information</h3></td><td></td>
                            </tr>
                            <tr>
                                <td>Full Name</td>
                                <td><h:inputText value="#{editAccountBean.fullname}" required="true" id="name" requiredMessage="Full Name invalid !"/></td>
                                <td><p:message for="name" /></td>
                            </tr>
                            <tr>
                                <td>Gender</td>
                                <td><h:selectOneMenu value="#{editAccountBean.gender}">
                                        <f:selectItem itemLabel="Male" itemValue="Male" />
                                        <f:selectItem itemLabel="FeMale" itemValue="FeMale" />
                                    </h:selectOneMenu></td>
                            </tr>
                            <tr>
                                <td>Address</td>
                                <td><h:inputTextarea value="#{editAccountBean.address}" id="address" required="true" requiredMessage="Address invalid !" /></td>
                                <td><p:message for="address" /></td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td><h:inputText value="#{editAccountBean.email}" required="true" id="email" requiredMessage="Email invalid !" validatorMessage="Email invalid !">
                                        <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
                                    </h:inputText></td>
                                <td><p:message for="email" /></td>
                            </tr>
                            <tr>
                                <td >Birth Of Date</td>
                                <td ><p:calendar id="bod" effect="explode" value="#{editAccountBean.dob}" navigator="true" showButtonPanel="true" required="true" requiredMessage="Select date !" /></td>
                                <td><p:message for="bod" /></td>
                            </tr>
                            <tr>
                                <td >Phone</td>
                                <td ><h:inputText id="phone" value="#{editAccountBean.phone}" required="true" requiredMessage="Phone invalid !" validatorMessage="Phone must 10 or 11 degit !" >
                                        <f:validateRegex pattern="[0-9]{10,11}" />
                                    </h:inputText></td>
                                <td><p:message for="phone" /></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><h:commandButton id="btni" value="Change Info" action="#{editAccountBean.resultEditInfo()}" /></td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                </h:form>
                <h:form prependId="false">
                    <div id="changepass">
                        <table align="center" width="600px">
                            <tr>
                                <td colspan="2" align="center"><h3>Change Password</h3></td><td></td>
                            </tr>
                            <tr>
                                <td>Older Password</td>
                                <td><h:inputSecret value="#{editAccountBean.oldpass}" id="old" required="true" requiredMessage="Older Password invalid !"/></td>
                                <td><p:message for="old" id="mso" /></td>
                            </tr>
                            <tr>
                                <td>New Password</td>
                                <td><h:inputSecret value="#{editAccountBean.newpass}" id="new" required="true" requiredMessage="New Password invalid !" /></td>
                                <td><p:message for="new" id="msn" /></td>
                            </tr>
                            <tr>
                                <td>Retype Password</td>
                                <td><h:inputSecret value="#{editAccountBean.retypepass}" id="retype" required="true" requiredMessage="Retype Password invalid !" /></td>
                                <td><p:message for="retype" id="msr" /></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><h:commandButton id="ch" value="Change Password" action="#{editAccountBean.resultEditPass()}"  /></td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
